<script setup>
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";

import { getLocalStorage, setLocalStorage } from "@/utils/common";
import api from "@/api";
import { useRouter } from "vue-router";
const route = useRouter();
const props = defineProps({
  proName: "",
});
const { proxy } = getCurrentInstance();
const active = ref(-1);
const tabHandleClick = function (item, index) {
  if (active.value == index) return;
  active.value = index;
  route.push(item.router);
  sessionStorage.setItem("activeRoute", index);
};

//获取项目列表
const projectList = ref([]);
const selVal = ref("");

//获取选中项目名称
if (props.proName) {
  selVal.value = props.proName;

  //将选中项目缓存浏览器
  setLocalStorage("pro_sel", selVal.value);
} else {
  selVal.value = getLocalStorage("pro_sel");
}


//针对提供第三方外部链接进行处理
//如果是提供给第三方的外部链接则不考虑默认展示的情况
if (proxy._GLOBAL.LINKTYPE !== 'weburl') {
  //默认展示

  const activeRoute = sessionStorage.getItem("activeRoute");
  if (activeRoute == null) {
    active.value = 0;
    sessionStorage.setItem("activeRoute", 0);
    route.push("/bim");
  } else {
    active.value = activeRoute;
  }
}

projectList.value = getLocalStorage("userInfo") && getLocalStorage("userInfo").siteList;

const isRouterActive = ref(true);
const changeHandleClick = async function (item) {
  selVal.value = item;

  //将选中项目缓存浏览器
  setLocalStorage("pro_sel", item);
  isRouterActive.value = false;
  nextTick(() => {
    isRouterActive.value = true;
  });
};

//退出登录
const logoutHandleClick = function () {
  api.auth
    .logout({
      userName: getLocalStorage("username"),
    })
    .then((res) => {
      if (res.status === "success") {
        window.localStorage.removeItem("userInfo");
        window.localStorage.removeItem("pro_sel");
        window.localStorage.removeItem("username");
        window.sessionStorage.removeItem("activeRoute");
        route.push("/login");
      }
    });
};
</script>

<template>
  <div class="top-container">
    <div class="header">
      <div class="logo"></div>
      <div class="desc">{{ proxy._GLOBAL.SYSTITLE }}</div>
      <div class="tabs">
        <div class="tab-item" :class="index == active ? 'active' : ''" v-for="(item, index) in proxy._GLOBAL.TABS"
          :key="item.value" @click="tabHandleClick(item, index)">
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="operation">
        <div class="project-select">
          <el-select v-model="selVal" class="m-2" size="small" @change="changeHandleClick">
            <el-option v-for="item in projectList" :key="item.unionId" :label="item.projectName" :value="item.unionId" />
          </el-select>
        </div>

        <div class="home">
          <el-popover popper-class="home-popover" placement="bottom" title="" trigger="click">
            <span class="logout" @click="logoutHandleClick">退出登录</span>
            <template #reference>
              <i></i>
            </template>
          </el-popover>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view v-if="isRouterActive"></router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top-container {
  min-width: 1500px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .header {
    width: 100%;
    height: 65px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("@/assets/images/home/header.png");
    overflow: hidden;

    .logo {
      float: left;
      margin-top: 15px;
      border-right: 1px #fff solid;
      width: 110px;
      height: 40px;
      margin-left: 20px;
      background-repeat: no-repeat;
      background-size: 90% 100%;
      background-image: url("@/assets/images/home/logo.png");
    }

    .desc {
      width: 310px;
      font-size: 32px;
      font-family: HanYiLingXinTiJian;
      letter-spacing: 2px;
      color: #ffffff;
      margin-left: 20px;
      line-height: 70px;
      float: left;
    }

    .tabs {
      max-width: 950px;
      height: 65px;
      color: #ffffff;
      overflow: hidden;
      float: left;
      margin-left: 170px;
      overflow-x: auto;
      overflow-y: hidden;
      font-family: SourceHanSansSC;

      .tab-item {
        height: 65px;
        line-height: 65px;
        text-align: center;
        float: left;
        padding: 0px 30px;
        cursor: pointer;
        font-size: 14px;

        &.active {
          background: rgba(193, 156, 249, 0.5);
          box-shadow: 0px 1px 1px 0px rgba(122, 99, 156, 0.35);
          border-bottom: 5px #ffffff solid;
          padding-bottom: 5px;
          box-sizing: border-box;
        }
      }
    }

    .operation {
      width: 180px;
      height: 65px;
      float: right;
      margin-right: 20px;
      display: flex;
      justify-content: space-around;

      .project-select {
        margin: 20px 10px 0px 0px;

        :deep .el-input__wrapper {
          background: unset;
          box-shadow: none;

          .el-input__inner {
            color: #ffffff;
            text-align: right;
          }
        }

        :deep .el-select .el-input.is-focus .el-input__wrapper {
          box-shadow: none !important;
        }

        :deep .el-select .el-input__wrapper.is-focus {
          box-shadow: none !important;
        }

        :deep .el-select .el-input .el-select__caret {
          color: #ffffff;
        }
      }

      .home {
        i {
          display: inline-block;
          width: 25px;
          height: 20px;
          margin-top: 22px;
          cursor: pointer;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("@/assets/images/home/home.png");
        }
      }
    }
  }

  .content {
    min-width: 1500px;
    width: 100vw;
    background: #fcfbfe;
  }
}
</style>
